<template>
    <div class="container">
        <van-nav-bar 
            :title="$router.currentRoute.name" 
            left-text="返回" 
            left-arrow 
            @click-left="$router.go(-1)">
        </van-nav-bar>

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            
            <div class="list-wrapper">
                <div class="loading" v-show="loading">
                    <van-loading type="spinner"/>
                </div>
                <div class="loading" v-if="list.length == 0">
                    还没有收货地址，请添加~~~
                </div>
                <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    @add="onAdd"
                    @edit="onEdit"
                />
            </div>
        </van-pull-refresh>
        
    </div>
</template>

<script>
    import { PullRefresh, AddressList, NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Radio, Button, Loading } from 'vant'
    import { mapGetters } from 'vuex'
    import { selectList } from '@/api/UserAddress'

    export default {
        name: 'Banding',
        components: {
            [PullRefresh.name]: PullRefresh,
            [AddressList.name]: AddressList,
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Radio.name]: Radio,
            [Button.name]: Button,
            [Loading.name]: Loading
        },
        data() {
            return {
                isLoading: false,
                chosenAddressId: '1',
                list: [],
                loading: true
            }
        },
        computed: {
            ...mapGetters(['userinfo'])
        },
        created() {
            this.getUserAddressList()
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                Toast('调查问卷')
            },
            //下拉刷新
            onRefresh() {
                //vant下拉加载
                setTimeout(() => {
                    this.$toast("刷新成功");
                    this.isLoading = false;
                }, 500);
            },
            onAdd() {
                this.$router.push({path: '/addressForm'})
            },
            onEdit(item, index) {
                this.$router.push({path: '/addressForm', query: {id: item.id}})
            },

            getUserAddressList() {
                selectList({userId: this.userinfo.id}).then(response => {
                    if (response.data.status === 200) {
                        this.loading = false
                        this.list = response.data.data

                        this.list.find((item) => { //默认地址勾选
                            if(item.default) {
                                return this.chosenAddressId = item.id
                            }
                        })
                    }
                }).catch(error => {

                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/styles/common.scss";
.container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .list-wrapper{
        .loading{
            @include center;
            margin-top: px2rem(10);
        }
    }
}


</style>